import { configureStore } from "@reduxjs/toolkit";
import { useDispatch, TypedUseSelectorHook, useSelector } from "react-redux";

// 一般用国内
// 国内  silce 切片
//国外大佬推荐  全局 API 切片 1.不需要手动配置axios，2.内置：取消请求 缓存 等高级操作

// 导入全局状态切片
import apiService from "@service/index";
const store = configureStore({
    // 要不要开启取决于在哪个开发环境，开发环境可以开启，生产环境不开启，不需要给用户看
    devTools: process.env.NODE_ENV !== "production", // 线下开启，线上不开启
    // devTools: false, 表示不开启
    // devTools: true, 表示开启
    reducer: {
        [apiService.reducerPath]: apiService.reducer
    },
    middleware: (getDefaultMiddleware) =>
        // 加入全局API切片的中间件 开启内置：取消请求 缓存 等高级操作
        getDefaultMiddleware().concat(apiService.middleware),
})
export const useTypedDispatch = () => useDispatch<AppDispatch>();

export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;
export type AppState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

export default store

